<template>
	<view style="position: relative;height:100vh">
		<u-navbar title='邀请用户' left-icon-color="white" :autoBack="true" :titleStyle="{color:'white'}"
			bgColor="transparent"></u-navbar>
		<image
			src="https://renovationcdn.jiachuangnet.com/addMaterial/homeBg.png"
			style="width:750rpx;height: 410rpx;"></image>
		<view style="width:700rpx;min-height:60vh;position: absolute;top:200rpx;left:25rpx;z-index:1;margin: 0 auto;">
			<!-- <u-swiper :current="current"  @change="change" previousMargin="30" nextMargin="30" circular :list="list" height="70vh"  bgColor="transparent"></u-swiper> -->
			<image src="https://renovationcdn.jiachuangnet.com/hb.png" mode="" style="width: 100%;height: 1200rpx;margin: auto;"></image>
			<!-- <view style="width: 650rpx;height: 50rpx;margin: auto;">
				<l-painter :board="poster" ref="painter" />
			</view> -->
			
			<view style="position: absolute;bottom:-100rpx;left: 0;right: 0;">
				<u-button shape="circle" color='linear-gradient(132deg, #02ABC7, #01C9A3)' @click="click" :disabled="load!=1"> 保存邀请海报</u-button>
			</view>
			<!-- <u-button shape="circle" color='linear-gradient(132deg, #02ABC7, #01C9A3)' @click="click"> 生成邀请海报并保存</u-button> -->
		</view>
		<u-popup :show='show' bgColor='transparent' mode="center"  @close="show=false" >
			<l-painter :board="poster" ref="painter"/>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show:false,
				assignTaskId:null,
				list: [],
				current:0,
				imgCode:'',
				tempFilePath:'',
				load:0,
				platform:null,
				text:''
			}
		},
		onLoad(option) {
			if(option.assignTaskId){
				// 邀请客户
				this.assignTaskId=option.assignTaskId
			}
			
		},
		computed:{
			poster(){
				return {
			           css: {
			               // 根节点若无尺寸，自动获取父级节点
			              height: "1156rpx",
			              width: "650rpx", 
						  position:'relative',
						  background:'#fffae8'
			           },
			           views: [
			               {
							   src:'https://renovationcdn.jiachuangnet.com/hb.png',
			                   type: "image",
							   css: {
							      height: "1156rpx",
							      width: "650rpx",
							      position:'absolute',
							   	  objectFit: "cover",
							      bottom:'0',
							      zIndex:'100'
							   },
			               },
			              {
			                  
							  src:this.imgCode,
			                  type: "image",
							  css: {
							      height: "446rpx",
							      width: "446rpx",
							  	  position:'absolute',
							  	  bottom:'165rpx',
							  	  left:'50%',
								  objectFit: "cover",
							  	  transform: 'translate(-50%,0%)',
							  	  zIndex:'1000',
							  	  borderRadius: '20rpx'
							  },
			              },
						  {
						      type: 'text',
						      text: this.text,
						      css: {
						          // 设置右对齐
								  position:'absolute',
								  bottom:'20rpx',
								  left:'50%',
								  transform: 'translate(-50%,0%)',
								  color:'#3aa4a6',
						          textAlign: 'right',
						      }
						  },
			           ]
			       }
			},
		},
		onShow() {
			
			
			// #ifdef APP
				console.log('app')
				this.platform='APP'
				this.text='请使用速工装APP扫码'
			// #endif
			
			
			// #ifdef APP-PLUS
				console.log('APP-PLUS')
				this.platform='APP'
				this.text='请使用速工装APP扫码'
			// #endif
			
			// #ifdef MP-WEIXIN
			console.log('WEIXIN')
			this.platform='WEIXIN'
			this.text='请使用微信小程序扫码'
			// #endif
			
			if(this.assignTaskId){
				// 邀请客户
				this.getCode();
				this.getPosters()
			}else{
				// 邀请工种
				this.getCodeTalent()
				this.getPosters()
			}
		},
		methods: {
			getPosters(){
				uni.$u.http.get('/posters/getPosters').then(res=>{
					this.list=res
				})
			},
			change(e){
				this.current = e.current
			},
			getCavas(){
				this.$refs.painter.canvasToTempFilePathSync({
				  fileType: "jpg",
				  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
				  pathType: 'url',
				  quality: 1,
				  success: (res) => {
					  // uni.$u.toast('海报生成成功:)');
					// this.show=true
					// // 非H5 保存到相册
					// // H5 提示用户长按图另存
					
					if(this.assignTaskId){
						// 邀请客户
						this.getCode();
					}else{
						// 邀请工种
						this.getCodeTalent()
					}
					console.log(this.poster)
					uni.saveImageToPhotosAlbum({
					    filePath: res.tempFilePath,
					    success:()=>{
							uni.$u.toast('已保存到相册!')
						},
						fail:()=>{
							uni.$u.toast('取消保存!')
						}
					});
				  },
				});
			},
			imageSuccess(i){
				console.log(i,1)
			},
			getCode(){
				if(this.platform=="WEIXIN"){
					uni.$u.http.get('/wx/code',{
						params:{
							scene:`assignTaskId=${this.assignTaskId}`,
						},
						responseType: 'arraybuffer',
					}).then(res=>{
						const arrayBuffer = new Uint8Array(res) //将二进制数据保存为arrayBuffer格式
						this.imgCode = 'data:image/png;base64,'+uni.arrayBufferToBase64(arrayBuffer) //'data:image/png;base64,'+拼接前缀
						this.load=1
						// setTimeout(()=>{
							
						// },2000)
					})
				}
				if(this.platform=="APP"){
					uni.$u.http.get('/app/customerInviteCode',{
						params:{
							scene:`assignTaskId=${this.assignTaskId}`,
						},
					}).then(res=>{
						if(res){
							this.imgCode =res
							this.load=1
						}
					})
				}
				
			},
			getCodeTalent(){
				if(this.platform=="WEIXIN"){
					uni.$u.http.get('/wx/inviteCode',{
						responseType: 'arraybuffer',
					}).then(res=>{
						const arrayBuffer = new Uint8Array(res) //将二进制数据保存为arrayBuffer格式
						this.imgCode = 'data:image/png;base64,'+uni.arrayBufferToBase64(arrayBuffer) //'data:image/png;base64,'+拼接前缀
						this.load=1
						// setTimeout(()=>{
							
						// },2000)
					})
				}
				
				if(this.platform=="APP"){
					uni.$u.http.get('/app/inviteCode').then(res=>{
						if(res){
							this.imgCode =res
							this.load=1
						}
					})
				}
				
			},
			click() {
				// let cover= this.list[this.current]
				// this.poster.views[0].src=cover
				
				
				// this.$nextTick(this.getCavas());
				this.show=true
				setTimeout(()=>{
					this.getCavas()
				},1000)
				// this.getCavas()
				
				// 非H5 保存到相册
				// H5 提示用户长按图另存
				// uni.saveImageToPhotosAlbum({
				//     filePath: this.tempFilePath,
				//     success:()=>{
				// 		uni.$u.toast('保存成功!')
				// 	},
				// 	fail:()=>{
				// 		uni.$u.toast('取消保存!')
				// 	}
				// });
			},
		}
	}
</script>
<style lang="scss" scoped>
 .imgCode{
	 position: absolute;
	 z-index: 1000;
	 left:50%;
	 top:50%;
	 transform: translate(-50%,-50%);
 }
	 
</style>
<style>
</style>